<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
			<shopro-login-modal></shopro-login-modal>
		<!-- #endif -->
		
		<view class="page">
			
				<view class="top">
					<view class="info">
						<view class="left">
							<text>可用积分</text>
							<view class="val">
								{{textVal}}
							</view>
						</view>
						<view class="right"@click="junit('/pages/prefile/order/order', {type: 0})">
							我的订单
						</view>
					</view>
					<scroll-view scroll-x  style="width: 97vw;" >
						<view class="typeArr">
							<view class="typeArrItem"  v-for="(item,index) in typeArr" :key="index" @click="changeType(item.category_id)">
								<text :class="activeTypeId==item.category_id ? 'activeText' :'' " >{{item.category_name}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				
			<!-- 	<view class="swiper" >
					<u-swiper :list="swiperArr" name="adv_image" ></u-swiper>
				</view> -->
			
				
					<scroll-view  style="height: 65vh;"  scroll-y @scrolltolower="scrolltolower">
						<view class="goodsArr">
							<view class="goodsArrItem" v-for="(item,index) in goodsList" :key="index" @click="junit('/pages/tabShop/goodsDetail/goodsDetail' , {id: item.id})">
								<view class="cover">
									<view class="firstCover" v-if="index==0">
										<text>精品推荐</text>
										<image src="../../static/images/other/firstShop.png" mode=""></image>
									</view>
									<u-image    width="192" height="192" lazy-load :src="item.image" :fade="true" duration="450">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
						
								<view class="info">
									<view class="title">
										{{item.name}}
									</view>
									<view class="desc">
										<text>限量20份</text>
										<text class="price">{{item.point}}积分</text>
									</view>
								</view>
								
							</view> 
						</view>
					</scroll-view>
				
		</view>
	</view>
	
</template>

<script>
	import noMore from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				activeTypeId: 0,
				params:{
					page: 1,
					page_size: 10,
				},
				typeArr:[
					{category_name:'全部',category_id: '0',}
				],
				goodsList:[],
				textVal:'',
				nextPage : true,
				swiperArr:[],
			};
		},
		components:{
			noMore
		},
		methods:{
			getSwiper(){
				this.myHttp({
					url:'/api/Adv/detail',
					data:{
						keyword: 'APP_POINT_SHOP'
					}
				}).then((res)=>{
						this.swiperArr = res.data.adv_list
				})
			},
			changeType(_id){
				if(_id == this.activeTypeId){
					return
				}
				this.params.page = 1
				this.activeTypeId = _id
				this.getGoodArr()
			},
			getShopType(){
				this.myHttp({
					url:'/api/goodscategory/tree',
				}).then((res)=>{
					if(res.code == 0){
						this.typeArr = this.typeArr.concat(res.data) 
					}
				})
			},
			getGoodArr(){
				let category_id = this.activeTypeId != 0 ? this.activeTypeId : ''
				this.myHttp({
					url:'/pointexchange/api/Goods/page',
					data:{
						page : this.params.page,
						page_size : this.params.page_size,
						category_id ,
					}
				}).then((res)=>{
					if(res.code == 0){
						if(this.params.page == 1){
							this.goodsList = []
						}
						
						this.goodsList = this.goodsList.concat( res.data.list)
						
					}
				})
			},
			scrolltolower(){
				console.log('触底了');
				if(this.goodsList.length < this.params.page_size ){
					return
				}
				this.params.page++
				this.getGoodArr()
			},
			getMemberInfo(){
				this.myHttp({
					url:'/api/member/userInfo',
				}).then((res)=>{
					this.textVal = res.data.point//积分
				})
			},
		},
		filters:{
		},
		onLoad() {
			this.getMemberInfo()
			this.getShopType()
			this.getGoodArr()
			// this.getSwiper()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;
		.top{
			width: 750rpx;
			// height: 140rpx;
			height: 260rpx;
			background: #FF0000;
			display: flex;
			flex-direction: column;
			.info{
				margin-top: 10rpx;
				padding: 0 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				flex: 1;
				.left{
					text{
						font-size: 24rpx;
					}
					.val{
						margin-top: 10rpx;
						font-weight: 600;
						font-size: 56rpx;
					}
				}
				.right{
					
				}
			}
			.typeArr{
				// background-color: #fff;
				display: flex;
				width: 100%;
				height: 80rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				align-items: center;
				.typeArrItem{
					font-size: 28rpx;
					padding: 24rpx 30rpx;
					font-family: PingFang SC;
					color: #fff;
					display: flex;
					justify-content: center;
					white-space: nowrap;
					position: relative;
					.activeText{
						color: #fff;
						&:after{
							content: '';
							position: absolute;
							bottom: 5%;
							left: 50%;
							transform: translateX(-50%);
							width: 60%;
							height: 8rpx;
							background: #fff;
							border-radius: 4rpx;
						}
					}
				}
				
			}
			
			
		}
		
		
		.swiper{
			margin-top: 27rpx;
			width: 700rpx;
			height: 235rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}
	
	
		.goodsArr{
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				// flex-wrap: wrap;
				// justify-content: space-between;
				background-color: #F5F5F5;
				padding: 0rpx 25rpx 50rpx;
				.goodsArrItem{
					width: 700rpx;
					height: 254rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					padding: 30rpx 20rpx;
					.cover{
						height: 192rpx;
						width: 192rpx;
						border-radius: 10rpx 10rpx 0 0;
						position: relative;
						.firstCover{
							position: absolute;
							top: -5%;
							left: -5%;
							width: 172rpx;
							height: 92rpx;
							z-index: 10;
							text{
								z-index: 10;
								position: absolute;
								top: 5%;
								left: 18%;
								color: $themeColor;
								font-weight: 600;
							}
							image{
								width: 172rpx;
								height: 92rpx;
							}
						}
					}
					image{
						height: 352rpx;
						width: 344rpx;
						border-radius: 10rpx 10rpx 0 0;
					}
					.info{
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
						height: 100%;
						flex: 1;
						.title{
							flex: 1;
							font-size: 26rpx;
							font-weight: 600;
							color: #000;
							display: -webkit-box;    
							-webkit-box-orient: vertical;    
							-webkit-line-clamp: 2;    
							overflow: hidden;
						}
						.desc{
							flex: 1;
							color: #A8A8A8;
							font-size: 24rpx;
							display: flex;
							flex-direction: column;
							.price {
								font-size: 26rpx;
								color: #E9612B;
								margin-top: 35rpx;
							}
						}
					}
					
				
				}
		}
	
	
	}

</style>
